<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table#tab{
				border-collapse: collapse;
				width: 1200px;
				text-align: center;
				margin: auto;
			}
			table#tab tr,
			table#tab tr th,
			table#tab tr td {
				border: 1px solid gray;
			}
			table#tab tr td a{
				cursor: pointer;
			}
			.delete {
				color: #FF0000;
			}
			div#goods div.goodsBox{
				width: 240px;
				height: 240px;
				background-color: #fff;
				margin: 10px;
				text-align: center;
				float: left;
			}
						
			div#goods div.goodsBox img{
				width: 150px;
				height: 150px;
			}
						
			.addShopCar{
				display: none;
			}
						
			.goodsBox:hover .ratings{
				display: none;
			}
			.goodsBox:hover .addShopCar{
				display: inline-block;
			}
			.addShopCar button{
				border: 0px;
			}
			.goodsBox:hover .addShopCar button{
				background-color: #f90;
				color: #fff;
				width: 100px;
				height: 35px;
			}
						
			.goodsName{
				width: 80%;
				overflow:hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin: auto;
			}	
		</style>
	</head>
	<body>
		<div id="box">
			<div id="show">
				<table id="tab">
					<thead>
						<tr>
							<th>
								<label for="xz">
									
								</label>
								<input type="checkbox" id="xz" />全选
							</th>
							<th>商品名称</th>
							<th>单价</th>
							<th>数量</th>
							<th>小计</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
						<tr>
							<th>
								<input type="checkbox" id="xz" />
								<label for="xz">
								</label>
							</th>
							<td>Redmi K20系列 幻境之心保护壳紫色</td>
							<td>39元</td>
							<td>
								<button type="button">-</button>
								1
								<button type="button">+</button>
								</td>
							<td class='delete'>39元</td>
							<td>
								<a>X</a>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="goods">
				<div class="goodsBox">
					<div>
						<img src="imgs/ErJi.png" />
					</div>
					<div>
						RedMi AirDots
					</div>
					<div>
						99.9元
					</div>
					<div class="ratings">
						4.3万人好评
					</div>
					<div class="addShopCar">
						<button type="button" >加入购物车</button>
					</div>
				</div>
				<div class="goodsBox">
					<div>
						<img src="imgs/ShuBao.png" />
					</div>
					<div>
						RedMi AirDots
					</div>
					<div>
						99.9元
					</div>
					<div class="ratings">
						4.3万人好评
					</div>
					<div class="addShopCar">
						<button type="button" >加入购物车</button>
					</div>
				</div>
				<div class="goodsBox">
					<div>
						<img src="imgs/Bi.png" />
					</div>
					<div>
						RedMi AirDots
					</div>
					<div>
						99.9元
					</div>
					<div class="ratings">
						4.3万人好评
					</div>
					<div class="addShopCar">
						<button type="button" >加入购物车</button>
					</div>
				</div>
				<div class="goodsBox">
					<div>
						<img src="imgs/YaGao.png" />
					</div>
					<div>
						RedMi AirDots
					</div>
					<div>
						99.9元
					</div>
					<div class="ratings">
						4.3万人好评
					</div>
					<div class="addShopCar">
						<button type="button" >加入购物车</button>
					</div>
				</div>
				<div class="goodsBox">
					<div>
						<img src="imgs/ShouHuan.png" />
					</div>
					<div>
						RedMi AirDots
					</div>
					<div>
						99.9元
					</div>
					<div class="ratings">
						4.3万人好评
					</div>
					<div class="addShopCar">
						<button type="button" >加入购物车</button>
					</div>
				</div>
			</div>
		</div>
		<script>
			console.log("arr:",arr);
			var tbody= document.getElementById("tbody");
			tbody.innerHTML="";
			var trs="";
						
			var goods= document.getElementById("goods");
			goods.innerHTML="";
			var divs=""
			
			for(var i=0;i<arr.length;i++){
				trs+=`
					<tr>
						<td>
							<input type="checkbox"/>
						</td>
						<td>
							${arr[i].goodsName}
						</td>
						<td>
							${arr[i].price}元
						</td>
						<td>
							<button type="button">-</button>
							<input type="number" value=1 />
							<button type="button">+</button>
						</td>
						<td>
							39元
						</td>
						<td>
							<a class="delete">  X </a>
						</td>
					</tr>

				divs+=`
					<div class="goodsBox">
						<div>
							<img src=${arr[i].img} class="img" />
						</div>
						<div class="goodsName">
							${arr[i].goodsName}
						</div>
						<div>
							${arr[i].price}元
						</div>
						<div class="ratings">
							${arr[i].goodsRatings}
						</div>
						<div class="addShopCar">
							<button type="button" >加入购物车</button>
						</div>
					</div>
			}
			tbody.innerHTML=trs;
			goods.innerHTML=divs;
	</body>
</html>
